<template>
  <div ref="charts">
  </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const mychart = this.$echarts.init(this.$refs.charts)
      var data = {
        value: [{
          "name": "IT公司",
          "value": 1446
        },
        {
          "name": "测试",
          "value": 928
        },
        {
          "name": "Vue",
          "value": 906
        },
        {
          "name": "后端",
          "value": 825
        },
        {
          "name": "Lover Boy 88",
          "value": 514
        },
        {
          "name": "动漫",
          "value": 486
        },
        {
          "name": "音乐",
          "value": 53
        },
        {
          "name": "直播",
          "value": 163
        },
        {
          "name": "广播电台",
          "value": 86
        },
        {
          "name": "戏曲曲艺",
          "value": 17
        },
        {
          "name": "演出票务",
          "value": 6
        },
        {
          "name": "给陌生的你听",
          "value": 1
        },
        {
          "name": "前端",
          "value": 1437
        },
        {
          "name": "商业财经",
          "value": 422
        },
        {
          "name": "娱乐八卦",
          "value": 353
        },
        {
          "name": "不加班",
          "value": 331
        },
        {
          "name": "科技资讯",
          "value": 313
        },
        {
          "name": "社会时政",
          "value": 307
        },
        {
          "name": "时尚",
          "value": 43
        },
        {
          "name": "网络奇闻",
          "value": 15
        },
        {
          "name": "旅游出行",
          "value": 438
        },
        {
          "name": "晋升机制",
          "value": 957
        },
        {
          "name": "Java",
          "value": 927
        },
        {
          "name": "没有打卡机制",
          "value": 908
        },
        {
          "name": "网页",
          "value": 693
        },
        {
          "name": "关注技术",
          "value": 611
        },
        {
          "name": "旅游网站偏好",
          "value": 512
        },
        {
          "name": "出国游",
          "value": 382
        },
        {
          "name": "交通票务",
          "value": 312
        },
        {
          "name": "旅游方式",
          "value": 187
        },
        {
          "name": "旅游主题",
          "value": 163
        },
        {
          "name": "港澳台",
          "value": 104
        },
        {
          "name": "本地周边游",
          "value": 3
        },
        {
          "name": "不内卷",
          "value": 1331
        },
        {
          "name": "每日下午茶",
          "value": 941
        },
        {
          "name": "基础教育科目",
          "value": 585
        },
        {
          "name": "考试培训",
          "value": 473
        },
        {
          "name": "语言学习",
          "value": 358
        },
        {
          "name": "留学",
          "value": 246
        },
        {
          "name": "K12课程培训",
          "value": 207
        },
        {
          "name": "艺术培训",
          "value": 194
        },
        {
          "name": "技能培训",
          "value": 104
        },
        {
          "name": "IT培训",
          "value": 87
        },
        {
          "name": "高等教育专业",
          "value": 63
        },
        {
          "name": "家教",
          "value": 48
        },
        {
          "name": "体育培训",
          "value": 23
        },
        {
          "name": "职场培训",
          "value": 5
        },
        {
          "name": "六险一金",
          "value": 1328
        },
        {
          "name": "Go",
          "value": 765
        },
        {
          "name": "股票",
          "value": 452
        },
        {
          "name": "保险",
          "value": 415
        },
        {
          "name": "贷款",
          "value": 253
        },
        {
          "name": "基金",
          "value": 211
        },
        {
          "name": "信用卡",
          "value": 180
        },
        {
          "name": "外汇",
          "value": 138
        },
        {
          "name": "P2P",
          "value": 116
        },
        {
          "name": "贵金属",
          "value": 98
        },
        {
          "name": "债券",
          "value": 93
        },
        {
          "name": "网络理财",
          "value": 92
        },
        {
          "name": "信托",
          "value": 90
        },
        {
          "name": "征信",
          "value": 76
        },
        {
          "name": "期货",
          "value": 76
        },
        {
          "name": "公积金",
          "value": 40
        },
        {
          "name": "银行理财",
          "value": 36
        },
        {
          "name": "银行业务",
          "value": 30
        },
        {
          "name": "典当",
          "value": 7
        },
        {
          "name": "海外置业",
          "value": 1
        },
        {
          "name": "轻松",
          "value": 1309
        },
        {
          "name": "中心区域",
          "value": 965
        },
        {
          "name": "知名大厂",
          "value": 900
        },
        {
          "name": "汽车车型",
          "value": 727
        },
        {
          "name": "购车阶段",
          "value": 461
        },
        {
          "name": "小姐姐多",
          "value": 309
        },
        {
          "name": "汽车美容",
          "value": 260
        },
        {
          "name": "新能源汽车",
          "value": 173
        },
        {
          "name": "汽车维修",
          "value": 155
        },
        {
          "name": "租车服务",
          "value": 136
        },
        {
          "name": "车展",
          "value": 121
        },
        {
          "name": "违章查询",
          "value": 76
        },
        {
          "name": "汽车改装",
          "value": 62
        },
        {
          "name": "汽车用品",
          "value": 37
        },
        {
          "name": "路况查询",
          "value": 32
        },
        {
          "name": "汽车保险",
          "value": 28
        },
        {
          "name": "陪驾代驾",
          "value": 4
        },
        {
          "name": "年终三薪",
          "value": 1275
        },
        {
          "name": "每年团建",
          "value": 1088
        },
        {
          "name": "只想要你知道",
          "value": 907
        },
        {
          "name": "维护",
          "value": 837
        },
        {
          "name": "比价",
          "value": 201
        },
        {
          "name": "海淘",
          "value": 195
        },
        {
          "name": "移动APP购物",
          "value": 179
        },
        {
          "name": "支付方式",
          "value": 119
        },
        {
          "name": "代购",
          "value": 43
        },
        {
          "name": "免费午餐",
          "value": 1234
        },
        {
          "name": "有项目奖",
          "value": 802
        },
        {
          "name": "运动项目",
          "value": 405
        },
        {
          "name": "体育类赛事",
          "value": 337
        },
        {
          "name": "健身项目",
          "value": 199
        },
        {
          "name": "健身房健身",
          "value": 78
        },
        {
          "name": "运动健身",
          "value": 77
        },
        {
          "name": "家庭健身",
          "value": 36
        },
        {
          "name": "健身器械",
          "value": 29
        },
        {
          "name": "办公室健身",
          "value": 3
        },
        {
          "name": "应届生",
          "value": 1201
        },
        {
          "name": "法律咨询",
          "value": 508
        },
        {
          "name": "化工材料",
          "value": 147
        },
        {
          "name": "广告服务",
          "value": 125
        },
        {
          "name": "会计审计",
          "value": 115
        },
        {
          "name": "人员招聘",
          "value": 101
        },
        {
          "name": "印刷打印",
          "value": 66
        },
        {
          "name": "知识产权",
          "value": 32
        },
        {
          "name": "翻译",
          "value": 22
        },
        {
          "name": "安全安保",
          "value": 9
        },
        {
          "name": "公关服务",
          "value": 8
        },
        {
          "name": "商旅服务",
          "value": 2
        },
        {
          "name": "展会服务",
          "value": 2
        },
        {
          "name": "特许经营",
          "value": 1
        },
        {
          "name": "休闲爱好",
          "value": 1169
        },
        {
          "name": "收藏",
          "value": 412
        },
        {
          "name": "摄影",
          "value": 393
        },
        {
          "name": "温泉",
          "value": 230
        },
        {
          "name": "博彩彩票",
          "value": 211
        },
        {
          "name": "美术",
          "value": 207
        },
        {
          "name": "书法",
          "value": 139
        },
        {
          "name": "DIY手工",
          "value": 75
        },
        {
          "name": "舞蹈",
          "value": 23
        },
        {
          "name": "钓鱼",
          "value": 21
        },
        {
          "name": "棋牌桌游",
          "value": 17
        },
        {
          "name": "KTV",
          "value": 6
        },
        {
          "name": "密室",
          "value": 5
        },
        {
          "name": "采摘",
          "value": 4
        },
        {
          "name": "电玩",
          "value": 1
        },
        {
          "name": "真人CS",
          "value": 1
        },
        {
          "name": "轰趴",
          "value": 1
        },
        {
          "name": "氛围轻松",
          "value": 1111
        },
        {
          "name": "手机",
          "value": 885
        },
        {
          "name": "电脑",
          "value": 543
        },
        {
          "name": "大家电",
          "value": 321
        },
        {
          "name": "BtoB",
          "value": 253
        },
        {
          "name": "网络设备",
          "value": 162
        },
        {
          "name": "摄影器材",
          "value": 149
        },
        {
          "name": "影音设备",
          "value": 133
        },
        {
          "name": "办公数码设备",
          "value": 113
        },
        {
          "name": "生活遍历",
          "value": 67
        },
        {
          "name": "有厨房",
          "value": 54
        },
        {
          "name": "智能设备",
          "value": 45
        },
        {
          "name": "没有加班过",
          "value": 22
        },
        {
          "name": "生日福利",
          "value": 1047
        },
        {
          "name": "交流",
          "value": 566
        },
        {
          "name": "全栈",
          "value": 289
        },
        {
          "name": "强",
          "value": 184
        },
        {
          "name": "学习",
          "value": 168
        },
        {
          "name": "扁平化管理",
          "value": 137
        },
        {
          "name": "额外奖金",
          "value": 1041
        },
        {
          "name": "摸鱼",
          "value": 505
        },
        {
          "name": "领导好",
          "value": 299
        },
        {
          "name": "早教",
          "value": 103
        },
        {
          "name": "奶粉辅食",
          "value": 66
        },
        {
          "name": "童车童床",
          "value": 41
        },
        {
          "name": "关注品牌",
          "value": 271
        },
        {
          "name": "宝宝玩乐",
          "value": 30
        },
        {
          "name": "母婴护理服务",
          "value": 25
        },
        {
          "name": "纸尿裤湿巾",
          "value": 16
        },
        {
          "name": "妈妈用品",
          "value": 15
        },
        {
          "name": "宝宝起名",
          "value": 12
        },
        {
          "name": "童装童鞋",
          "value": 9
        },
        {
          "name": "胎教",
          "value": 8
        },
        {
          "name": "宝宝安全",
          "value": 1
        },
        {
          "name": "宝宝洗护用品",
          "value": 1
        },
        {
          "name": "软件应用",
          "value": 1018
        },
        {
          "name": "系统工具",
          "value": 896
        },
        {
          "name": "理财购物",
          "value": 440
        },
        {
          "name": "生活实用",
          "value": 365
        },
        {
          "name": "影音图像",
          "value": 256
        },
        {
          "name": "社交通讯",
          "value": 214
        },
        {
          "name": "手机美化",
          "value": 39
        },
        {
          "name": "办公学习",
          "value": 28
        },
        {
          "name": "应用市场",
          "value": 23
        },
        {
          "name": "母婴育儿",
          "value": 14
        },
        {
          "name": "游戏",
          "value": 946
        },
        {
          "name": "玩玩写写",
          "value": 565
        },
        {
          "name": "PC游戏",
          "value": 353
        },
        {
          "name": "网页游戏",
          "value": 254
        },
        {
          "name": "游戏机",
          "value": 188
        },
        {
          "name": "模拟辅助",
          "value": 166
        },
        {
          "name": "高手带队",
          "value": 942
        },
        {
          "name": "护肤品",
          "value": 177
        },
        {
          "name": "彩妆",
          "value": 133
        },
        {
          "name": "美发",
          "value": 80
        },
        {
          "name": "香水",
          "value": 50
        },
        {
          "name": "个人护理",
          "value": 46
        },
        {
          "name": "美甲",
          "value": 26
        },
        {
          "name": "SPA美体",
          "value": 21
        },
        {
          "name": "Linux",
          "value": 914
        },
        {
          "name": "绿植花卉",
          "value": 311
        },
        {
          "name": "狗",
          "value": 257
        },
        {
          "name": "其他宠物",
          "value": 131
        },
        {
          "name": "水族",
          "value": 125
        },
        {
          "name": "猫",
          "value": 122
        },
        {
          "name": "动物",
          "value": 81
        },
        {
          "name": "鸟",
          "value": 67
        },
        {
          "name": "宠物用品",
          "value": 41
        },
        {
          "name": "宠物服务",
          "value": 26
        },
        {
          "name": "书籍阅读",
          "value": 913
        },
        {
          "name": "网络小说",
          "value": 483
        },
        {
          "name": "关注书籍",
          "value": 128
        },
        {
          "name": "文学",
          "value": 105
        },
        {
          "name": "报刊杂志",
          "value": 77
        },
        {
          "name": "人文社科",
          "value": 22
        },
        {
          "name": "弹性工作",
          "value": 907
        },
        {
          "name": "装修建材",
          "value": 644
        },
        {
          "name": "家具",
          "value": 273
        },
        {
          "name": "家居风格",
          "value": 187
        },
        {
          "name": "家居家装关注品牌",
          "value": 140
        },
        {
          "name": "家纺",
          "value": 107
        },
        {
          "name": "厨具",
          "value": 47
        },
        {
          "name": "灯具",
          "value": 43
        },
        {
          "name": "家居饰品",
          "value": 29
        },
        {
          "name": "家居日常用品",
          "value": 10
        },
        {
          "name": "生活服务",
          "value": 883
        },
        {
          "name": "提升自我",
          "value": 536
        },
        {
          "name": "家政服务",
          "value": 108
        },
        {
          "name": "摄影服务",
          "value": 49
        },
        {
          "name": "搬家服务",
          "value": 38
        },
        {
          "name": "物业维修",
          "value": 37
        },
        {
          "name": "婚庆服务",
          "value": 24
        },
        {
          "name": "二手回收",
          "value": 24
        },
        {
          "name": "鲜花配送",
          "value": 3
        },
        {
          "name": "维修服务",
          "value": 3
        },
        {
          "name": "殡葬服务",
          "value": 1
        },
        {
          "name": "求职创业",
          "value": 874
        },
        {
          "name": "创业",
          "value": 363
        },
        {
          "name": "目标职位",
          "value": 162
        },
        {
          "name": "目标行业",
          "value": 50
        },
        {
          "name": "兼职",
          "value": 21
        },
        {
          "name": "期望年薪",
          "value": 20
        },
        {
          "name": "实习",
          "value": 16
        },
        {
          "name": "雇主类型",
          "value": 10
        },
        {
          "name": "UI设计",
          "value": 789
        },
        {
          "name": "星座",
          "value": 316
        },
        {
          "name": "算命",
          "value": 303
        },
        {
          "name": "解梦",
          "value": 196
        },
        {
          "name": "风水",
          "value": 93
        },
        {
          "name": "面相分析",
          "value": 47
        },
        {
          "name": "手相",
          "value": 32
        },
        {
          "name": "公益",
          "value": 90
        }
        ],
        image: ""
      }
      //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
      let maskImage = new Image();
      maskImage.src = data.image

      maskImage.onload = function () {
        mychart.setOption({
          title: {
            text: '公司印象',
            left: 'center'
          },


          backgroundColor: '#fff',
          tooltip: {
            show: false
          },
          series: [{
            type: 'wordCloud',
            gridSize: 1,

            sizeRange: [1, 49],
            rotationRange: [0, 0],
            // maskImage: maskImage,
            textStyle: {
              color: function (v) {
                let color = ['#27D38A', '#FFCA1C', '#5DD1FA', '#F88E25', '#47A0FF', '#FD6565']
                let num = Math.floor(Math.random() * (5 + 1));
                // console.log(num)
                return color[num];
              },
            },
            left: 'center',
            top: '15%',
            width: '96%',
            height: '80%',
            // right: null,
            // bottom: null,
            // width: 300,
            // height: 200,
            // top: 20,
            data: data.value
          }]
        })
      }
    }

  }
}
</script>

<style>
</style>